
## Web加载&渲染基本原理
1. 输入一串网址后，UI thread
2. Network thread 通过DNS查找IP -> 设置UA等信息，发送GET请求 -> 建立TLS连接 -> 收到301，从第2步再来。 ->Web server 上的应用处理请求 -> 读取Response
分析数据类型 -> 安全检查 -> 通知U数据准备就绪
3. Renderer process
    - Main Thread  
        - 解析文本-构建DOM-生成 DOM Tree  
        - 边解析DOM边加载子资源
        - JS阻塞解析async/defer
        - 解析CSS，计算computed styles -生成 CSSOM  
        - 构造布局树位置&大小
        - 生成 Render Tree
    - Raster Thread 和Compositor Thread
        - 将 DOM Tree 和 CSSOM 整合行程 Render Tree  
        - 遇到 ＜ script>则暂停渲染，优先加载并执行 JS 代码，完成再继续  
        - 创建绘制记录,确定绘制的顺序
        - 将页面拆分图层 构建图层树
        - 复合线程象素化图层创建一个复合帧


:::tip
浏览器渲染流程: javascript -> style -> layout -> paint -> composite  
:::

## 复合线程(compositor thread)与图层(layers)

- 复合线程做什么
    - 将页面拆分图层进行绘制再进行复合  
    - 利用DevTools了解网页的图层拆分情况  
    - 哪些样式仅影响复合  

4 things a browser can animate cheaply
  transform: translate(npx, npx);  
  transform: scale(n);  
  transform: rotate(ndeg);  
  opacity: 0...1;

- 减少重绘(repaint)

开启重绘区域绿色高亮显示
google命令行 ```show Rendering``` 然后去二级菜单
<img src="./img/rendering.png"></img>
willghange

- 利用DevTools识别paint的瓶颈
- 利用will-change对其值创建新的图层



## 重绘(Repaint)和回流(Reflow)
- 都是浏览器渲染页面时发生的两个概念，它们的区别在于：
    - 重绘（Repaint）：当页面中的某些元素的样式（例如颜色、背景、边框等）发生改变，但它们的布局（位置、大小）并没有受到影响并未改变时，浏览器会触发重绘。  
    - 回流（Reflow）：当页面中的某些元素的布局（例如大小、位置、添加或删除元素等）发生改变时，浏览器会重新计算这些元素的位置和大小，然后重新排列它们的布局，这个过程称为回流。  
回流的开销比重绘更大，因为回流涉及到了元素的位置和大小的重新计算和排列，而这些计算需要遍历整个文档树，并且需要重新计算每个受影响的元素的布局，所以会消耗更多的计算资源和时间。因此，为了提高页面性能，应该尽可能减少回流的次数。

以下是一些可能导致回流和重绘的操作：

改变窗口大小或滚动页面
修改元素的位置、大小或样式
添加或删除元素
修改文本内容
改变元素的 class 属性
改变元素的某些属性，如 offsetTop、offsetLeft、offsetWidth、offsetHeight 等。
### 优化策略

- 使用 CSS3 中的 transform、opacity、filter 等属性，它们可以不会引起回流或重绘的情况下改变元素的外观。
- 避免频繁的操作样式，可以将多个操作合并为一次操作。
- 避免频繁的修改 DOM，可以将操作缓存在 JavaScript 中，最后一次性修改 DOM。
- 避免使用 table 布局，因为 table 布局可能会多次触发回流。
- 使用绝对定位或固定定位来改变元素的位置，因为它们不会对其他元素的布局产生影响。
- 使用文档片段（Document Fragment）进行 DOM 操作，然后一次性插入到文档中，减少回流次数。
- 避免layout thrashing
    - 避免回流  
    - 读写分离
### 影响回流的操作
    - 添加/删除元素
    - 操作styles
    - display: none
    - offsetLeft, scrollTop, clientWidth
    - 移动元素位置
    - 修改浏览器大小 ，字体大小  

问题： 有一个元素，position为fixed，top从10px变为20px，left从10px变为20px。这个过程会发生重绘还是回流，还是两个都会
- 在这个情况下，由于元素的 position 属性为 fixed，它的位置不会影响其他元素的布局，所以修改 top 和 left 属性不会导致其他元素的位置和大小发生改变，因此不会触发回流。
- 但是，由于元素的位置发生了改变，浏览器会重新计算并重新绘制这个元素的外观，因此会触发重绘。因此，这个过程会发生重绘，但不会触发回流。